<template>
    <div class="box">
    <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="back">
        <template #right>
            <van-popover v-model:show="showPopover" :actions="actions" theme="dark" @select="koo">
                <template #reference>
                    <van-icon name="weapp-nav" color="#1989fa" />
                </template>
            </van-popover>
            <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
        </template>
    </van-nav-bar>
    <div>
    <van-swipe :autoplay="3000" lazy-render @click="image">
      <van-swipe-item><van-image :src="list.img1" /></van-swipe-item>
      <van-swipe-item><van-image :src="list.img2" /></van-swipe-item>
      <van-swipe-item><van-image :src="list.img3" /></van-swipe-item>
      <van-swipe-item><van-image :src="list.img4" /></van-swipe-item>
    </van-swipe>
    <van-image-preview v-model:show="showImagePreview" :images="images"></van-image-preview>
    <p class="ph">￥{{ list.originprice }}</p>
    <h5 class="hu">{{ list.proname }}</h5>
  </div>
  <van-action-bar>
  <van-action-bar-icon icon="cart-o" text="购物车" :badge="num" @click="go"/>
  <van-action-bar-button type="warning" text="加入购物车" @click="join"/>
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
</div>
</template>

<script setup lang="ts">
import { useRouter,useRoute } from 'vue-router';
import { ref, reactive } from "vue"
import {details} from "@/service/detail"
import {addCar} from "@/service/car"
import { useCounterStore } from "@/stores/counter"
let router = useRouter()
let route = useRoute()
let store = useCounterStore()
let showShare = ref(false)
let showPopover = ref(false)
let showImagePreview = ref(false)
let list = ref([] as any)
let images = reactive<any>([])
let proid = ref<any>("")
let userid = ref((store as any).userInfo.userid)
let num =ref<any>("")
let actions = reactive([
    { text: '首页', icon: 'wap-home-o' },
    { text: '购物车', icon: 'shopping-cart-o' },
    { text: '分享', icon: 'share-o' },
])
let options = reactive([
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
])
const back = () => {
    router.push("/home")
}
const image = ()=>{
    showImagePreview.value = true
}
const go =()=>{
    router.push("/car")
}
const koo = (action: any) => {
    if (action.text === "首页") {
        router.push("/home")
    } else if (action.text === "购物车") {
        router.push("/car")
    } else {
        showShare.value = true
    }
}
proid.value= route.params.id
console.log(proid.value)
details(proid.value).then((res)=>{
    list.value = res.data
    images = [res.data.img1, res.data.img2, res.data.img3, res.data.img4]
    console.log(list)
})
const join =()=>{
    addCar(proid.value,userid.value,num.value).then((res:any)=>{
        if(res.code==="200"){
            num.value++
        }
    })
}
</script>

<style scoped>
.ph{
    color: red;
}
.box{
    padding-bottom: 60px;
    }
</style>